<div class="page">
  <div class="header">
    <img src="../../../assets/img/看板素材/top.png" alt="">
    <div class="time">{{currentTime | date:'yyyy-MM-dd HH:mm:ss'}}</div>
  </div>
  <div class="body">
    <div class="body-content">
      <div class="left">
        <div class="left-item top">
          <span class="positioned-span">出入库数量分析</span>
          <div class="left-item-tip">
            <div class="tip1 tip">
              <div class="tip-content">
                <div class="tip-type">
                  入库
                </div>
                <div class="tip-number">
                  {{warehouseData.totalInbound}}
                </div>
              </div>
            </div>
            <div class="tip2 tip">
              <div class="tip-content">
                <div class="tip-type">
                  出库
                </div>
                <div class="tip-number">
                  {{warehouseData.totalOutbound}}
                </div>
              </div>
            </div>
          </div>
          <div class="left-item-charts" >
            <div class="inAndOutData" id="inAndOutData"></div>
          </div>
        </div>
        <div class="left-item top">
          <span class="positioned-span">出库类型比率</span>
          <div class="left-item-tip">
            <div class="tip-icon ">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-offline"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{chukuData.salesOutboundPercentage}}%</div>
                <div class="type">销售出库</div>
              </div>
            </div>
            <div class="tip-icon">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-exit"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{chukuData.purchaseReturnPercentage}}%</div>
                <div class="type">采购退货</div>
              </div>
            </div>
            <div class="tip-icon">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-homologous-tool"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{chukuData.jobOrderIssuePercentage}}%</div>
                <div class="type">生产领料</div>
              </div>
            </div>

          </div>
          <div class="left-item-charts" >
            <div class="inAndOutData" id="chuKuPieData"></div>
          </div>
        </div>
      </div>
      <div class="mid">
        <div class="mid-top">
          <div class="mid-top-title">
            <div class="mid-title-item first">
              <div>实时总库存</div>
              <div>{{warehouseData.totalInventory}}</div>
            </div>
            <div class="mid-title-item second">
              <div>入库总数</div>
              <div>{{warehouseData.totalInbound}}</div>
            </div>
            <div class="mid-title-item third">
              <div>出库总数</div>
              <div>{{warehouseData.totalOutbound}}</div>
            </div>
          </div>
          <div class="mid-content">
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.initialInboundQuantity}}</div>
                <div class="MCI-title">初期仓库数量</div>
                <div class="MCI-pom">&nbsp;</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/初期库存.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.purchaseInboundQuantity}}</div>
                <div class="MCI-title">采购入库数量</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/采购入库.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.purchaseReturnOutboundQuantity}}</div>
                <div class="MCI-title">采购退货出库</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/采购退货.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.salesOutboundQuantity}}</div>
                <div class="MCI-title">销售出库数量</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/销售出库.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.salesReturnInboundQuantity}}</div>
                <div class="MCI-title">销售退货入库</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/销售退货.png" alt="">
              </div>
            </div>
          </div>
          <div class="mid-content">
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.jobOrderIssueOutboundQuantity}}</div>
                <div class="MCI-title">生产领料出库</div>
                <div class="MCI-pom">&nbsp;</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/生产领料.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.jobOrderReturnInboundQuantity}}</div>
                <div class="MCI-title">生产退料入库</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/生产退料.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.productEndInboundQuantity}}</div>
                <div class="MCI-title">生产品入库</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/生产入库.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.outboundDocumentQuantity}}</div>
                <div class="MCI-title">出库单据数量</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/出库单据数.png" alt="">
              </div>
            </div>
            <div class="mid-content-item">
              <div class="MIC-text">
                <div class="MCI-number">{{warehouseData.inboundDocumentQuantity}}</div>
                <div class="MCI-title">入库单据数量</div>
              </div>
              <div class="MIC-iocn">
                <img src="../../../assets/img/看板素材/入库单据数量.png" alt="">
              </div>
            </div>
          </div>
        </div>
        <div class="mid-bot">
          <span class="positioned-span">出入库记录表</span>
          <div class="mid-bot-table">
            <d-data-table  [dataSource]="tableData" [lazy]="true" [scrollable]="true" [fixHeader]="true" [tableWidthConfig]="tableWidthConfig"  [tableOverflowType]="'auto'" [scrollable]="true"   [resizeable]="true">
              <thead dTableHead>
                <tr dTableRow>
                  <th dHeadCell *ngFor="let colOption of dataTableOptions.columns"><span dTooltip [content]="colOption.header">{{ colOption.header }}</span></th>
                </tr>
              </thead>
              <tbody dTableBody >
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex" >
                  <tr dTableRow >
                    <td dTableCell >
                      <span class="ellipsis" dTooltip [content]="rowItem?.orderNum">{{rowItem.orderNum}}</span>
                    </td>
                    <td dTableCell >
                      <span class="ellipsis" dTooltip [content]="rowItem?.orderType">{{rowItem.orderType}}</span>
                    </td>
                    <td dTableCell >
                      <span class="ellipsis" dTooltip [content]="rowItem?.partName">{{rowItem.partName }}</span>
                      <span class="ellipsis" dTooltip [content]="rowItem?.partType"> ({{rowItem.partType}})</span>
                    </td>
                    <td dTableCell>
                      <span class="ellipsis" dTooltip [content]="rowItem.outQuantity || rowItem.inQuantity">{{rowItem.outQuantity || rowItem.inQuantity}}</span>
                    </td>
                    <td dTableCell>
                      <span class="ellipsis" dTooltip [content]="rowItem?.createTime">{{rowItem.createTime}}</span>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
        </div>
      </div>
      <div class="left">
        <div class="mid-bot right">
          <span class="positioned-span">物料库存信息</span>
          <div class="mid-bot-table">
            <d-data-table  [dataSource]="tableData2" [lazy]="true" [scrollable]="true" [fixHeader]="true" [tableWidthConfig]="tableWidthConfig2"  [tableOverflowType]="'auto'" [scrollable]="true"   [resizeable]="true">
              <thead dTableHead>
                <tr dTableRow>
                  <th dHeadCell  *ngFor="let colOption of dataTableOptions2.columns"><span dTooltip [content]="colOption.header">{{ colOption.header }}</span></th>
                </tr>
              </thead>
              <tbody dTableBody >
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex" >
                  <tr dTableRow >
                    <td dTableCell >
                      <span class="ellipsis" dTooltip [content]="rowItem.partName">{{rowItem.partName }}</span>
                      <span class="ellipsis" dTooltip [content]="rowItem.partType">({{rowItem.partType}})</span>
                    </td>
                    <td dTableCell >
                      <span class="ellipsis" dTooltip [content]="rowItem.warehouseName">{{rowItem.warehouseName}}</span>
                    </td>
                    <td dTableCell >
                      <span class="ellipsis" dTooltip [content]="rowItem.positionName">{{rowItem.positionName }}</span>
                    </td>
                    <td dTableCell>
                      <span class="ellipsis" dTooltip [content]="rowItem.partPositionInventory">{{rowItem.partPositionInventory}}</span>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
        </div>
        <div class="left-item top tip2">
          <span class="positioned-span">入库类型比率</span>
          <div class="left-item-tip tip5">
            <div class="tip-icon ">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-enter"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{rukuData.initialInboundPercentage}}%</div>
                <div class="type">初期入库</div>
              </div>
            </div>
            <div class="tip-icon">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-warehousing"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{rukuData.purchaseInboundPercentage}}%</div>
                <div class="type">采购入库</div>
              </div>
            </div>
            <div class="tip-icon">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-rotate"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{rukuData.salesReturnInboundPercentage}}%</div>
                <div class="type">销售退货</div>
              </div>
            </div>
          </div>
          <div class="left-item-tip tip3 tip5">
            <div class="tip-icon ">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-new-line"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{rukuData.jobOrderReturnInboundPercentage}}%</div>
                <div class="type">生产退料</div>
              </div>
            </div>
            <div class="tip-icon ">
              <div class="tip-icon-icon">
                <div class="tII-icon">
                  <i class="icon-auxiliary-tool"></i>
                </div>
              </div>
              <div class="tip-icon-text">
                <div class="title">{{rukuData.productEndInboundPercentage}}%</div>
                <div class="type">生产入库</div>
              </div>
            </div>
            <!-- <div class="tip-icon tip4">

            </div> -->

          </div>
          <div class="left-item-charts" >
            <div class="inAndOutData" id="chuku"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
